<!-- 文章信息管理页 -->
<template>
  <el-table :data="tableData.data" style="width: 100%">
      <el-table-column prop="articleReport.r_id" label="Id" width="100"></el-table-column>
      <el-table-column prop="articleReport" label="Prompt" width="200">
        <template #default="scope">
            <el-tag style="margin: 0px 5px;" :type="scope.row.articleReport.process == 0?'warning':'success'">{{ scope.row.articleReport.process == 0? "请尽快处理": "已处理"}}</el-tag>
        </template>
      </el-table-column>
      <!-- 作者信息 -->
      <el-table-column prop="user" label="Name" width="150">
          <template #default="scope">
              <!-- 作者头像 -->
              <div style="display: flex;">
                  <el-avatar :size="30" :src="scope.row.user.picture" />
                  <!-- 作者名称 -->
                  <div style="align-self: center;margin: 0px 5px;">
                      {{ scope.row.user.username }}
                  </div>
              </div>
          </template>
      </el-table-column>
      <el-table-column prop="article" label="Article" width="200">
          <template #default="scope">
            <div style="display: flex;cursor: pointer;" @click="scope.row.article?.cover === undefined ? this.$router.push('error'):this.$router.push('/article?id='+scope.row.article.a_id)">
              <el-avatar :size="30" :src="JSON.stringify(scope.row.article) === '[]' ? 'https://avatars.githubusercontent.com/u/27342882?v=4&size=64' : scope.row.article?.cover"/>              <!-- 超出距离省略文字 -->
              <div style="align-self: center;margin: 0px 5px;width: 150px;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;">
                  {{ JSON.stringify(scope.row.article)==='[]'?'已处理成功':(scope.row.article?.title || '文章标题')}}
              </div>
            </div>
          </template>
      </el-table-column>
      <el-table-column prop="process" label="Process" width="150">
          <template #default="scope">
              <el-progress :percentage="scope.row.articleReport.process > 0?100:50" :status="scope.row.articleReport.process > 0?'success':'warning'" />
          </template>
      </el-table-column>
      <el-table-column align="right" label="选择处理操作">
          <!-- <template #header>
              <el-input style="width: 300px;" v-model="search" size="small" placeholder="Type to search" />
          </template> -->
          <template #default="scope">
              <el-button :disabled="scope.row.articleReport.process != 0" size="small" type="success" @click="unViolation(scope.$index, scope.row)">
                  无违规操作
              </el-button>
              <el-button :disabled="scope.row.articleReport.process != 0" size="small" type="danger" @click="violation(scope.$index, scope.row)">
                  删除文章
              </el-button
              >
          </template>
      </el-table-column>
  </el-table>

  <div class="demo-pagination-block">
      <el-pagination
          v-model:current-page="this.tableData.pageNum"
          v-model:page-size="this.tableData.size"
          :page-sizes="[5, 10, 20, 50]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="this.tableData.total"
          @size-change="getUser"
          @current-change="getUser"
      />
</div>

</template>

<script>
import axios from 'axios';
import { ElMessage } from 'element-plus'
import { ElMessageBox } from 'element-plus'

export default {
name: 'test5',
components: {},
props: {},
data() {
  return {
      tableData:{
          total:0,
          pageNum:1,
          size:5,
          data:[]
      }
  }
},
computed: {},
watch: {},
methods: {
  violation(index, value){
      console.log(value.article.a_id);
      axios.get('http://localhost:8888/admin/violation',{
      params:{
          a_id:value.article.a_id,
          r_id:value.articleReport.r_id
      }
      }).then(data=>{
          if(data.data.data){
              ElMessage({
              message: '删除成功.',
              type: 'success',
              })
          }
          this.$router.go(0)
      })
  },
  unViolation(index, value){
    axios.get('http://localhost:8888/admin/unViolation',{
      params:{
          r_id:value.articleReport.r_id
      }
      }).then(data=>{
          if(data.data.data){
              ElMessage({
              message: '处理成功.',
              type: 'success',
              })
          }
          this.$router.go(0)
      })
  },
  handleClick(content){
      this.dialogVisible = true
      this.showContent = content
  },
  getReport(){
      axios.get('http://localhost:8888/admin/getReport',{
      params:{
          pageNum:this.tableData.pageNum,
          size:this.tableData.size
      }
      }).then(data=>{
          if(data.data.data){
              this.tableData = data.data.data
          }
      })
  }
},
created() {
  this.getReport()
},
mounted() {}
}
</script>

<style scoped>
.demo-pagination-block .demonstration {
margin-bottom: 16px;
}
</style>
